<template>
  <div class="department-container">
    <div class="app-container">

        <el-card>
           <!-- 用一个行列布局 -->
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px">
            <el-col :span="20">
              <svg-icon icon-class="home" /><span>江苏传智播客教育科技股份有限公司</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>负责人</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span>
                      操作<i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <!-- 一级部门的pid就是 ' ' -->
                      <el-dropdown-item @click.native="hAdd('')">添加一级部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-tree
          default-expand-all
          :data="list"
          :props="defaultProps"
          @node-click="handleNodeClick">
          <template slot-scope="{node,data}">
            <el-row type="flex" justify="space-between" align="middle" style="height: 40px;width:100%">
            <el-col :span="20">
              <svg-icon icon-class="home" /><span>{{node.label}}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <!-- 两个内容 -->
                <el-col>{{data.manager}}</el-col>
                <!-- 下拉菜单 element -->
                <el-col>
                  <el-dropdown>
                    <span>
                      操作<i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="hAdd(data.id)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="hEdit(data.id)">编辑部门</el-dropdown-item>
                      <el-dropdown-item @click.native="hDel(data.id)">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          </template>
          </el-tree>
        </el-card>

    </div>

    <el-dialog 
    @close="hDialogClose" 
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="isEdit ? '编辑部门':'添加部门'" 
    :visible.sync="showDialog">
      <DeptDialog  
      @close="hClose"
      ref = 'refDeptDialog'
      @success= "hSuccess"
      :isEdit="isEdit"
      :pid="curId"
      :originList="originList"
      
      />
    </el-dialog>
  </div>
</template>
<script>
import { getDepartments,delDepartment } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import DeptDialog from './deptDialog.vue'

export default{
  created(){
    //发请求
    this.loadDepartment()
  },
  components:{DeptDialog},
  data(){
    return{
      isEdit:false,
      curId:'',
      showDialog:false,
      list: [], // tree中的数据
    
      defaultProps:{
        children:'children',
        label:'name'
      },
      //收集数据提供给子组件使用
      originList:[]
    }
  },
  methods:{
    hDialogClose(){
      //找到子组件，调用它的重置表单的方法
      this.$refs.refDeptDialog.resetForm()
    },
    hSuccess(){
     
      //关闭弹框
      this.showDialog = false
      //更新数据
      this.loadDepartment()
    },
    hAdd(id){
      //显示弹框
      this.showDialog = true
      //拿到当前的id，传给子组件
      this.curId = id
      //设置状态为编辑
      this.isEdit = false
    },
    hEdit(id){
      //更新当前的id
      this.curId =id
      //设置状态位编辑
      this.isEdit = true
      //打开弹框
      this.showDialog = true

      //找到子组件，要求它发请求，获取详情
      //父组件中调用子组件的方法
      this.$nextTick(()=>{
        console.log(this.$refs.refDeptDialog)
        //获取子组件的实例
        //调用它的方法
        this.$refs.refDeptDialog.loadDepartmentDetail()
      })
    },
    hClose() {
      this.showDialog = false
    },
    async doDel(id){
    //调用接口，做删除
     await delDepartment(id)
    //删除后提示
    this.$message.success('删除成功')
    //更新数据
      this.loadDepartment()
    },
    hDel(id){
      this.$confirm('此操作将永久删除部门, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 做删除
            this.doDel(id)
          }).catch(() => {

          })
    },
    async loadDepartment(){
      const res = await getDepartments()
      console.log('res',res)
      //去掉第一项
      res.data.depts.shift()
      this.originList = res.data.depts.map(item=>{
        return{
          id:item.id,
          pid:item.id,
          name:item.name,
          code:item.code
        }
      })
      this.list = tranListToTreeData(res.data.depts)
    },
      
     handleNodeClick(data){
        console.log(data)
  }
  }
}
</script>